<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的音乐</title>
	<style>
	/* 头部 */
	.os_mac{
	margin: 0;
    padding: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    background-color: #fafafa;
    overflow-y: scroll;
    min-width: 1000px;
}
.mod_header{
	color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    background-color: #fff;
    position: relative;
    z-index: 4;
}
.section_inner{
	color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    max-width: 1200px;
    position: relative;
    margin: 0 50px;
    min-width: 900px;
    padding-top: 90px;
}
.qqmusic_title{
    color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 22px;
}
.qqmusic_logo{
	line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    font-size: 100%;
    color: #000;
    border: 0 none;
    width: 170px;
    height: 46px;
}
.mod_top_nav{
	color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 198px;
    top: 0;
}
.top_nav_item{
	color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    float: left;
    margin-right: -5px;
}
.top_nav_link--current1{
	font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    text-decoration: none;
    display: block;
    padding: 0 20px;
    line-height: 90px;
    height: 90px;
    text-align: center;
    font-size: 18px;
    background-color: #31c27c;
    color: #fff;
}
.top_nav_link--current2{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    text-decoration: none;
    display: block;
    padding: 0 20px;
    line-height: 90px;
    height: 90px;
    text-align: center;
    font-size: 18px;
    background-color: #fafafa;
    color:#0c0c0c;
}
.mod_top_subnav{
	color: #000;
    font-size: 14px;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    height: 51px;
    line-height: 51px;
    border-top: 1px solid #f2f2f2;
    padding-left: 230px;
    margin-right: -50px;
}
.top_subnav_item{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    line-height: 51px;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font-size: 15px;
    color: #c1c1c1;
    margin-right: 47px;
}
.top_subnav__link{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    line-height: 51px;
    list-style: none;
    font-size: 15px;
    text-decoration: none;
    display: block;
    color: #31c27c;
}
.mod_top_search{
	color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: absolute;
    top: 25px;
    right: 250px;
}
.g-search{
        display: flex;
        width: 250px;
        height: 32px;
        margin: 0 auto;
        border: 1px solid #c9c9c9;
        border-radius: 16px 0 0 16px
    }
.u-search{
        width: 50px;
        background-color: #c9c9c9;
        outline: none;
        border: none;
        cursor: pointer
    }
.u-iput{
        flex: 1;
        outline: none;
        border: none;
        margin-left: 1rem
    }
.mod_top_login{
    color: #000;
    font-size: 14px;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: absolute;
    top: 0;
    right: 0;
    height: 90px;
    line-height: 90px;
} 
.qqmusic_title2{
    color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 100%;
    position: absolute;
    right:0px;
    top: 22px;
} 
.div1{
    /*border:5px solid #ffdc00;*/
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: relative;
    
    background:50% 0 repeat-x;
}
/* 主体 */
	.div1{
	color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
	}
.div11{
	color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    background: url(../images/我的音乐背景图.jpg?max_age=2592000&v=13351eccb28020677a18a0f57349e5e6) 50% no-repeat;
    background-size: cover;
    overflow: hidden;
    height: 622px;
}
.div111{
	color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    max-width: 1200px;
    position: relative;
    margin: 0 50px;
    min-width: 900px;
}
.h21111{
    color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 100%;
    background-image: -webkit-image-set(url(../images/私人音乐空间.png?max_age=2592000&v=e6091d7cd6e4142e075c91798c5d51cc&v=e6091d7cd6e4142e075c91798c5d51cc) 1x,url(管理登录我的音乐.png?max_age=2592000&v=e6091d7cd6e4142e075c91798c5d51cc&v=e6091d7cd6e4142e075c91798c5d51cc&v=c9f2c556deffacc16d2ead47c7be1206) 2x);
    margin-left: auto;
    margin-right: auto;
    width: 735px;
    height: 64px;
    background-position: 0 0;
    margin-top: 210px;
    -webkit-transition: all 1s;
    -webkit-transition-delay: .1s;
    opacity: 1;
    -webkit-transform: translate(0,0);
}
.div1111{
	    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    background-image: -webkit-image-set(url(../images/私人音乐空间.png?max_age=2592000&v=e6091d7cd6e4142e075c91798c5d51cc&v=e6091d7cd6e4142e075c91798c5d51cc) 1x,url(../images/登录管理我的音乐.png?max_age=2592000&v=e6091d7cd6e4142e075c91798c5d51cc&v=e6091d7cd6e4142e075c91798c5d51cc&v=c9f2c556deffacc16d2ead47c7be1206) 2x);
    margin-left: auto;
    margin-right: auto;
    width: 345px;
    height: 30px;
    background-position: 0 -70px;
    margin-top: 30px;
    margin-bottom: 36px;
    -webkit-transition: all 1s;
    -webkit-transition-delay: .2s;
    opacity: 1;
    -webkit-transform: translate(0,0);

}
.a1111{
	    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    text-decoration: none;
    border-radius: 2px;
    padding: 0 23px;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #31c27c;
    background-color: #31c27c;
    color: #fff;
    display: block;
    font-size: 20px;
    height: 48px;
    width: 128px;
    text-align: center;
    margin: 0 auto;
    -webkit-transition: all 1s;
    -webkit-transition-delay: .3s;
    line-height: 49px;
    opacity: 1;
    -webkit-transform: translate(0,0);
}

	</style>
</head>
<body>
<!-- 头部 -->
<div class="mod_header">
    	<div class="section_inner">
    		<h1 class="qqmusic_title">
				<a href="https://y.qq.com">
				<!-- 图片和网页在同一级目录，引用的时候  ./ -->
					<img src="../images/logo.png" alt="" class="qqmusic_logo"> 
				</a>
   			</h1>
   			<ul class="mod_top_nav" role="nav">
   		<!-- 谁有底色谁的a就是class="top_nav_link top_nav_link--current1" -->
				<li class="top_nav_item">
					<a href="https://y.qq.com" class="top_nav_link top_nav_link--current2" title="音乐馆">音乐馆</a>
				</li>
				<li class="top_nav_item">
					<a href="https://y.qq.com" class="top_nav_link top_nav_link--current1" title="我的音乐">我的音乐</a>
				</li>
				<li class="top_nav_item">
					<a href="https://y.qq.com" class="top_nav_link top_nav_link--current2" title="客户端">客户端</a>
				</li>
				<li class="top_nav_item">
					<a href="https://y.qq.com" class="top_nav_link top_nav_link--current2" title="开放平台">开放平台</a>
				</li>
				<li class="top_nav_item">
					<a href="https://y.qq.com" class="top_nav_link top_nav_link--current2" title="VIP">VIP</a>
				</li>
   			</ul>
   			
   			<div class="mod_top_search" role="search">
				<div class="g-search">
                    <input type="text" placeholder="搜索音乐、MV、歌单、用户"  class="u-iput"/>
                    <input type="button" value="搜索"  class="u-search"/>
                </div>
   			</div>
            <h1 class="qqmusic_title2">
                <a href="https://y.qq.com">
                <!-- 图片和网页在同一级目录，引用的时候  ./ -->
                    <img src="../images/logo.png" alt="" class="qqmusic_logo"> 
                </a>
            </h1>
        </div>
        <div class="div1">
<!-- 主体 -->
<div class="div1">
	<div class="div11">
		<div class="div111">
			<h2 class="h21111"></h2>
			<div class="div1111"></div>
			<a href="" class="a1111">立刻登录</a>
		</div>
	</div>
</div>
	
</body>
</html>